<template>
	<view class="page">
		<view class="header-top flex text-center font-size-15 font-color-888">
			<text
				class="header-item flex-1 font-size-15"
				v-for="(tab , i) in tab_list"
				:key="i"
				:class="{'active':i==tab_index}"
				@click="changeTab(i)"
			>
				{{tab.name}}
				<text class="mar-l-3 font-color-price" v-if="tab.total">({{tab.total}})</text>
			</text>
		</view>
		<view class="container">
			<block v-if="tab_list[tab_index].all_list.length">
				<consult-list
					class="mar-t-20"
					:range="tab_list[tab_index].all_list"
					v-if="tab_list[tab_index].type == 'counselor' &&  tab_list[tab_index].all_list.length"
				></consult-list>
				<activity-list
					v-else-if="tab_list[tab_index].type=='activity' && tab_list[tab_index].all_list.length "
					:range="tab_list[tab_index].all_list"
				></activity-list>
				<article-list v-else :range="tab_list[tab_index].all_list"></article-list>
			</block>
		</view>
		<no-more v-if="tab_list[tab_index].index_page >= tab_list[tab_index].total_page"></no-more>
	</view>
</template>

<script>
import consultList from '@/components/consult-list'
import activityList from '@/components/act-list'
import articleList from '@/components/article-list'
import { getConsultors, getActList, getEduList } from '@/utils/http'
export default {
	data() {
		return {
			tab_list: [],
			tab_index: 0,
			search_q: '',
			counselor: [],
			activity_num: 0,
			counselor_num: 0,
			edu_num: 0
		}
	},
	components: {
		consultList,
		activityList,
		articleList
	},
	methods: {
		changeTab(i) {
			this.tab_index = i
			this.setTypeLoad()
		},
		//根据类型加载数据
		setTypeLoad() {
			let current_tab = this.tab_list[this.tab_index]
			if (current_tab.index_page < current_tab.total_page) {
				switch (current_tab.type) {
					case 'counselor':
						this.getConsultorList()
						break
					case 'activity':
						this.activitys()
						break
					case 'edu':
						this.eduList()
						break
					default:
						break
				}
			}
		},
		//设置数据展示
		setDataList(res) {
			let current_tab = this.tab_list[this.tab_index]
			// current_tab.index_page = res.current_page
			// current_tab.total_page = res.last_page
			current_tab.all_list = res.data
			// current_tab.total = res.total
		},
		//获取咨询师
		getConsultorList() {
			let current_tab = this.tab_list[this.tab_index]
			getConsultors({
				page: (current_tab.index_page += 1),
				q: this.search_q
			}).then(res => {
				if (res) {
					this.tab_list[this.tab_index].all_list = res.data
					// this.setDataList(res)
				}
			})
		},
		//活动
		activitys() {
			let current_tab = this.tab_list[this.tab_index]
			getActList({
				page: (current_tab.index_page += 1),
				q: this.search_q
			}).then(res => {
				if (res) {
					this.setDataList(res)
				}
			})
		},
		//知识
		eduList() {
			let current_tab = this.tab_list[this.tab_index]
			getEduList({
				page: (current_tab.index_page += 1),
				q: this.search_q
			}).then(res => {
				if (res) {
					this.setDataList(res)
				}
			})
		},
		init() {
			this.tab_list = [
				{
					name: '咨询师',
					type: 'counselor',
					total: this.counselor_num,
					index_page: 0,
					total_page: 1,
					all_list: []
				},
				{
					name: '活动',
					type: 'activity',
					index_page: 0,
					total_page: 1,
					total: this.activity_num,
					all_list: []
				},
				{
					name: '家庭知识',
					type: 'edu',
					total: this.edu_num,
					index_page: 0,
					total_page: 1,
					all_list: []
				}
			]
			this.tab_index = 0
		}
	},
	//上拉加载
	onReachBottom() {
		let current_tab = this.tab_list[this.tab_index]
		if (current_tab.index_page < current_tab.total_page) {
			//根据类型加载数据
			this.setTypeLoad()
		}
	},
	onLoad(options) {
		this.search_q = options.q
		this.activity_num = options.activity_num
		this.edu_num = options.edu_num
		this.counselor_num = options.counselor_num
		this.init()
		this.setTypeLoad()
		// this.getConsultorList()
		// this.activitys()
	}
}
</script>

<style scoped>
.header-top {
	padding: 15px 10px;
}
.header-top .active {
	font-weight: bold;
	color: #0088ff !important;
}
</style>